<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>qTetris</title>
    <link rel="stylesheet" href="design/style.css" />
    
    <script src="source/Board.js"></script>
    <script src="source/Display.js"></script>
    <script src="source/HighScores.js"></script>
    <script src="source/Keyboard.js"></script>
    <script src="source/Level.js"></script>
    <script src="source/Score.js"></script>
    <script src="source/Tetrimino.js"></script>
    <script src="source/Tetriminos.js"></script>
    <script src="source/Init.js"></script>
    
    <script src="../utils/Utils.js"></script>
    <script src="../utils/Storage.js"></script>
    <script src="../utils/Sounds.js"></script>
</head>

<body>
    <div id="container" class="mainScreen">
        <div class="leftSide">
            <div class="board">
                <div class="field"></div>
                <div class="winker"></div>
                <div id="ghost"></div>
                <div id="piece"></div>
            </div>
            
            <div class="messages">
                <div class="text">
                    <h2>Tetris</h2>
                    <p>Select the level</p>
                </div>
                
                <div class="levels">
                    choose level:<br />
                    <div class="left" data-action="decrease"></div>
                    <span class="leveler">1</span>
                    <div class="right" data-action="increase"></div>
                    <ul>
                        <li><a href="#" data-action="start">s<u>t</u>art</a></li>
                        <li><a href="#" data-action="highScores">h<u>i</u>gh scores</a></li>
                        <li><a href="#" data-action="help"><u>h</u>elp</a></li>
                    </ul>
                </div>
                
                <ul class="pause">
                    <li><a href="#" data-action="endPause"><u>c</u>ontinue</a></li>
                    <li><a href="#" data-action="finishGame"><u>n</u>ew game</a></li>
                </ul>
                
                <div class="input">
                    <p>your name:</p>
                    <input type="text" />
                    <a href="#" data-action="save"><u>o</u>k</a>
                    <a class="restart" href="#" data-action="mainScreen"><u>n</u>ew game</a>
                </div>
                
                <div class="high">
                    <div class="scores"></div>
                    <div class="none">no scores available</div>
                    <a class="restore" href="#" data-action="restore"><u>r</u>estore</a>
                    <a class="back" href="#" data-action="mainScreen"><u>b</u>ack</a>
                </div>
                
                <div class="controls">
                    <div class="left">
                        <b>Left Arrow</b><br />
                        <b>Right Arrow</b><br />
                        <b>Down Arrow</b><br />
                        <b>X</b> or <b>Up Arrow</b><br />
                        <b>Z</b><br />
                        <b>Ctrl</b> or <b>Space</b><br />
                        <b>P</b><br />
                        <b>M</b><br />
                        <b>Enter</b>
                    </div>
                    <div class="middle">
                        - <br /> - <br /> - <br /> - <br /> - <br />
                        - <br /> - <br /> - <br /> -
                    </div>
                    <div class="right">
                        Move left<br />
                        Move right<br />
                        Soft drop<br />
                        Rotate right<br />
                        Rotate left<br />
                        Hard drop<br />
                        Pause game<br />
                        Mute/Unmute<br />
                        Start playing
                    </div>
                    <p>Use the links or keys (underline letters) to navigate throught the screens.</p>
                    <a class="back" href="#" data-action="mainScreen"><u>b</u>ack</a>
                </div>
            </div>
        </div>
        
        <div class="rightSide">
            <div class="next">
                <div class="content">
                    <div id="next"></div>
                </div>
                <div class="title">next</div>
            </div>
            <div class="level">
                <div class="content">1</div>
                <div class="title">level</div>
            </div>
            <div class="score">
                <div class="content">0</div>
                <div class="title">score</div>
            </div>
            <div class="lines">
                <div class="content">0</div>
                <div class="title">lines</div>
            </div>
            
            <div class="audio" data-action="sound">
                <div class="waves">
                    <div></div><div></div>
                    <div></div><div></div>
                </div>
                <div class="triangle"></div>
                <div class="box"></div>
            </div>
            <a class="pauser" href="#" data-action="pause"><u>p</u>ause</a>
        </div>
    </div>  
    
    
    <div class="tetriminos">
        <div id="i">
            <div class="r1"    data-top="0" data-left="2"></div>
            <div class="r3"    data-top="0" data-left="1"></div>
            
            <div class="r0"    data-top="1" data-left="0"></div>
            <div class="r0 r3" data-top="1" data-left="1"></div>
            <div class="r0 r1" data-top="1" data-left="2"></div>
            <div class="r0"    data-top="1" data-left="3"></div>
            
            <div class="r2"    data-top="2" data-left="0"></div>
            <div class="r2 r3" data-top="2" data-left="1"></div>
            <div class="r1 r2" data-top="2" data-left="2"></div>
            <div class="r2"    data-top="2" data-left="3"></div>
            
            <div class="r1"    data-top="3" data-left="2"></div>
            <div class="r3"    data-top="3" data-left="1"></div>
        </div>
        
        <div id="j">
            <div class="r0"    data-top="0" data-left="0"></div>
            <div class="r1 r3" data-top="0" data-left="1"></div>
            <div class="r1"    data-top="0" data-left="2"></div>
            
            <div class="r0 r2" data-top="1" data-left="0"></div>
            <div class="r0 r1 r2 r3" data-top="1" data-left="1"></div>
            <div class="r0 r2" data-top="1" data-left="2"></div>
            
            <div class="r3"    data-top="2" data-left="0"></div>
            <div class="r1 r3" data-top="2" data-left="1"></div>
            <div class="r2"    data-top="2" data-left="2"></div>
        </div>
        
        <div id="l">
            <div class="r3"    data-top="0" data-left="0"></div>
            <div class="r1 r3" data-top="0" data-left="1"></div>
            <div class="r0"    data-top="0" data-left="2"></div>
            
            <div class="r0 r2" data-top="1" data-left="0"></div>
            <div class="r0 r1 r2 r3" data-top="1" data-left="1"></div>
            <div class="r0 r2" data-top="1" data-left="2"></div>
            
            <div class="r2"    data-top="2" data-left="0"></div>
            <div class="r1 r3" data-top="2" data-left="1"></div>
            <div class="r1"    data-top="2" data-left="2"></div>
        </div>
        
        <div id="o">
            <div class="r0 r1 r2 r3" data-top="0" data-left="1"></div>
            <div class="r0 r1 r2 r3" data-top="0" data-left="2"></div>
            
            <div class="r0 r1 r2 r3" data-top="1" data-left="1"></div>
            <div class="r0 r1 r2 r3" data-top="1" data-left="2"></div>
        </div>
        
        <div id="s">
            <div class="r3"    data-top="0" data-left="0"></div>
            <div class="r0 r1" data-top="0" data-left="1"></div>
            <div class="r0"    data-top="0" data-left="2"></div>
            
            <div class="r0 r3" data-top="1" data-left="0"></div>
            <div class="r0 r1 r2 r3" data-top="1" data-left="1"></div>
            <div class="r1 r2" data-top="1" data-left="2"></div>
            
            <div class="r2"    data-top="2" data-left="0"></div>
            <div class="r2 r3" data-top="2" data-left="1"></div>
            <div class="r1"    data-top="2" data-left="2"></div>
        </div>
        
        <div id="t">
            <div class="r0 r1 r3"    data-top="0" data-left="1"></div>
            
            <div class="r0 r2 r3"    data-top="1" data-left="0"></div>
            <div class="r0 r1 r2 r3" data-top="1" data-left="1"></div>
            <div class="r0 r1 r2"    data-top="1" data-left="2"></div>
            
            <div class="r1 r2 r3"    data-top="2" data-left="1"></div>
        </div>
        
        <div id="z">
            <div class="r0"    data-top="0" data-left="0"></div>
            <div class="r0 r3" data-top="0" data-left="1"></div>
            <div class="r1"    data-top="0" data-left="2"></div>
            
            <div class="r2 r3" data-top="1" data-left="0"></div>
            <div class="r0 r1 r2 r3" data-top="1" data-left="1"></div>
            <div class="r0 r1" data-top="1" data-left="2"></div>
            
            <div class="r3"    data-top="2" data-left="0"></div>
            <div class="r1 r2" data-top="2" data-left="1"></div>
            <div class="r2"    data-top="2" data-left="2"></div>
        </div>
    </div>
</body>
</html>